在前面的文章中说明了界面控件Essential Studio for WinRT(XAML)中的SfDateTimeRangeNavigator控件的使用示例，下面来看看如何在时间范围控件上实现标签自定义。

自定义标签

    在Essential Studio for WinRT(XAML)的SfDateTimeRangeNavigator控件可以帮助用户以简化的方式可视化大数据，在更高层次和低层次的条形是表示数据时间跨度的，在默认情况下会自动计算的时间跨度，对于给定的数据会提供适当的时间格式和间隔。

    间隔属性有以下几种类型Year、Quarter、Month、Week、Day、Hour。

<syncfusion:SfDateTimeRangeNavigator x:Name="rangepicker" ItemsSource="{Binding power}"  XBindingPath="Date" >
            <syncfusion:SfDateTimeRangeNavigator.Intervals> 
                <syncfusion:Interval IntervalType="Quarter"/>
                <syncfusion:Interval IntervalType="Month"/>
            </syncfusion:SfDateTimeRangeNavigator.Intervals>
            <syncfusion:SfDateTimeRangeNavigator.Content>
                <syncfusion:SfChart   >
                    <syncfusion:SfChart.PrimaryAxis>
                        <syncfusion:CategoryAxis Visibility="Collapsed" />
                    </syncfusion:SfChart.PrimaryAxis>
                    <syncfusion:SfChart.SecondaryAxis>
                        <syncfusion:NumericalAxis Visibility="Collapsed" />
                    </syncfusion:SfChart.SecondaryAxis>
                    <syncfusion:FastLineBitmapSeries XBindingPath="Date" ItemsSource="{Binding power}" YBindingPath="Value">
                        </syncfusion:FastLineBitmapSeries>
                </syncfusion:SfChart>
                </syncfusion:SfDateTimeRangeNavigator.Content>
        </syncfusion:SfDateTimeRangeNavigator>

    在下面的截图中显示了季度和月份的时间间隔。

    当用用下面的格式放大时，自动时间跨度格式会简化数据的可视化表示。

标签样式自定义

    使用LabelBarStyle属性可以实现标签样式自定义，这个可以应用到更高层的条形或更低层级的条形。

<chart:SfDateTimeRangeNavigator.HigherLevelBarStyle>
                    <chart:LabelBarStyle Background="Red" LabelHorizontalAlignment="Left">
                        <chart:LabelBarStyle.LabelStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="FontSize" Value="10"/>
                            </Style>
                        </chart:LabelBarStyle.LabelStyle>
                    </chart:LabelBarStyle>
  </chart:SfDateTimeRangeNavigator.HigherLevelBarStyle>

    下面的屏幕快照显示的是标签水平对齐方式设置为左。

>>Essential Studio for WinRT(XMAL)最新版下载